import React, {Component} from 'react';
import BaseOpts from '../BaseOpts';
import './index.css';
import {Input, InputNumber, Slider, Radio} from 'antd';
import Ajax from '../../common/ajax';
import SlideInput from '../../common/SlideInput/index';

const RadioGroup = Radio.Group;

class MVideoOpts extends BaseOpts {

    static defaultProps = {
        data: {
            style: {},
            dataset: {}
        }
    };

    constructor(props) {
        super(props);

        this.state = {
            data: props.data,
        };
    }

    render() {
        var {style, customStyle, dataset} = this.state.data;
        var url = dataset.url || '';
        var autoplay = dataset.autoplay || '0';
        var marginTop = parseFloat((style ? style.marginTop : 0) || 0);
        var marginBottom = parseFloat((style ? style.marginBottom : 0) || 0);
        var height = parseFloat((style ? style.height : 0) || 0);

        try {
            url = decodeURIComponent(url);
        } catch (e) {
        }
        return (
            <div className="optsPanel">

                <div className="optsPanel__item optsPanel__item_auto">
                    <label className="optsPanel__item__hd">视频源文件链接</label>
                    <div className="optsPanel__item__bd">
                        <Input
                            defaultValue={url}
                            onInput={(e) => {
                                var val = e.target.value;
                                this.$dataChange('url', encodeURIComponent(val), 'dataset');
                            }}
                            onBlur={(e) => {
                                this._parseVideoUrl(e.target.value);
                            }}
                        />
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">播放方式</label>
                    <div className="optsPanel__item__bd">
                        <RadioGroup onChange={(e) => {
                            this.$dataChange('autoplay', e.target.value, 'dataset');
                        }} value={autoplay}>
                            <Radio value={'0'}>手动</Radio>
                            <Radio value={'1'}>自动</Radio>
                        </RadioGroup>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">高度</label>
                    <div className="optsPanel__item__bd">
                        <InputNumber min={0} value={height} onChange={(val) => {
                            this.$dataChange('height', val + 'px', 'style');
                        }}/>px
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">上外边距</label>
                    <div className="optsPanel__item__bd">
                        <div className="sliderInputWrap">
                            <SlideInput step={1} min={0} max={100} value={marginTop} onChange={(val) => {
                                this.$dataChange('marginTop', val + 'px', 'style');
                            }}/>
                        </div>
                    </div>
                </div>

                <div className="optsPanel__item">
                    <label className="optsPanel__item__hd">下外边距</label>
                    <div className="optsPanel__item__bd">
                        <div className="sliderInputWrap">
                            <SlideInput step={1} min={0} max={100} value={marginBottom} onChange={(val) => {
                                this.$dataChange('marginBottom', val + 'px', 'style');
                            }}/>
                        </div>
                    </div>
                </div>

            </div>
        );
    }

    _parseVideoUrl(videoUrl) {
        var _self = this;

        Ajax.G('/openapi/CHome/parseTxVideoUrl', {
            video_url: videoUrl
        }, function (res) {
            var result = res.result;

            _self.$dataChange('_url', result.url, 'dataset');

        })
    }
}

export default MVideoOpts;
